<template>
	<view class="firstShowPage" :class="showOn">
		<view class="fsp1">
			双指操控与拖拽地图
		</view>

		<view class="fsp2">
			发现探索更多丰富的体验吧!
		</view>


		<view class="fsp3">
			<image src="../../../static/images/first_show1.png" />
		</view>



		<view class="fsp2" style="color: #fff;">
			上下左右拖拽：查看地图
		</view>

		<view class="fsp4">
			<image src="../../../static/images/first_show2.png" />
		</view>
		<view class="fsp2" style="color: #fff;">
			双指操控：放大缩小地图
		</view>

		<view class="fsp5" @tap="subThis">
			我知道了
		</view>

	</view>
</template>

<script>
	export default {
		props: ["is_read"],
		data() {
			return {				
				showOn: ''
			}
		},
		
		mounted(){
			
		},
		
		watch:{
			is_read(newv,oldv){
				if(newv == 1){
				
					this.showOn = '';
				}else{
					
					this.showOn = 'showOn';
				}		
			}
				
		},
		
		methods:{
			subThis(){
				uni.setStorageSync('firstArNav',1);
				this.showOn = '';
			}
		}


	}
</script>

<style lang="scss" scoped>
	.showOn {
		display: block !important;
	}

	.firstShowPage {
		z-index: 9999999;
		background-color: rgba(0, 0, 0, 0.8);
		height: 100vh;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: none;

		.fsp1 {
			display: flex;
			justify-content: center;
			margin-top: 160rpx;
			color: #fff;
			font-weight: 700;
			font-size: 40rpx;

			width: 100%;
		}

		.fsp2 {
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			color: #999999;
			font-weight: 700;
			font-size: 26rpx;

			width: 100%;
		}

		.fsp3 {
			margin-top: 70rpx;

			justify-content: center;
			display: flex;
			width: 100%;

			image {
				width: 300rpx;
				height: 300rpx;

			}
		}

		.fsp4 {
			margin-top: 70rpx;

			justify-content: center;
			display: flex;
			width: 100%;

			image {
				width: 300rpx;
				height: 150rpx;

			}
		}

		.fsp5 {
			margin-top: 60rpx;
			width: 356rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #0FBCD6 0%, #0CCA91 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 700;
			margin-left: 192rpx;

		}
	}
</style>